<template>
  <div class="data-content">
    <dv-border-box-9 style="height: 15vh">
      <div class="data-container">
        <div class="total-alarm">
          <span class="number" style="color: red">{{totalAlarm}}</span>
          <span class="number-content">总报警数</span>
        </div>
        <div class="temp-alarm">
          <span class="number">{{tempAlarm}}</span>
          <span class="number-content">周期报警数</span>
        </div>
        <div class="top-alarm">
          <span class="number" style="color: red;">{{topAlarm}}</span>
          <span class="number-content">一级报警</span>
        </div>
        <div class="second-alarm">
          <span class="number">{{secondAlarm}}</span>
          <span class="number-content">二级报警</span>
        </div>
        <div>

        </div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<script>
/* eslint-disable */
import request from '@/network/request'
export default {
  name: 'alarmData',
  data () {
    return {
      timer: null,
      totalAlarm: 0,
      tempAlarm: 0,
      topAlarm: 0,
      secondAlarm: 0
    }
  },
  methods: {
    handleData () {
      request({
        url: '/dataOp/getAllCount',
        method: 'GET'
      }).then(res => {
        this.totalAlarm = res.data.data.allCount.totalAlarmNum
        this.tempAlarm = res.data.data.allCount.monthAlarmNum
        this.topAlarm = res.data.data.allCount.classoneAlarmNum
        this.secondAlarm = res.data.data.allCount.classtwoAlarmNum
      })
    }
  },
  mounted () {
    this.handleData()
    this.timer = setInterval(() => {
      this.handleData()
    }, 5000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
  /* eslint-disable */
}
</script>

<style scoped>
@import "../../../assets/scss/font.css";
.data-container {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 60%;
}
.total-alarm, .filter-alarm, .top-alarm, .second-alarm, .temp-alarm {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.number {
  font-size: 2vw;
  font-family: led,serif
}
.number-content {
  font-size: 1vw;
  font-family: serif;
}
</style>
